//页面的分页查询的参数
let pageInfo = {
    userName: '',
    page: 1,
    pageSize: 10,
  }
  //总条数
  let total = 0
  //总页数
  let totalpage = 0
  //当前页面的数据列表
  let list = []
  
  /**
   * 获得用户列表数据
   * @returns {any}
   */
  async function getUserList() {
    let options = {
      url: 'http://146.56.230.35:3007/users/userList',
      type: 'GET',
      data: pageInfo,
    }
    try {
      let res = await request(options)
      if (res.code !== 200) {
        return alert(res.msg)
      }
      total = res.data.count
      list = res.data.list
      totalpage = Math.ceil(total / pageInfo.pageSize)
      return list
    } catch (error) {
      console.log(error)
    }
    return null
  }
  
  /**
   * 动态拼接页面元素
   * @date 2021-05-06
   * @returns {any}
   */
  async function renderUserList() {
    let arr = []
    try {
      arr = await getUserList()
    } catch (error) {
      console.log(error)
    }
    if (!arr) {
      return
    }
    let table = $('#userTable')
    //找到不是第一行的tr
    let tr = table.find('tr:not(:first)')
    //删除tr
    tr.remove()
    if (arr.length === 0) {
      table.append(`<tr><td colspan="7">没有数据</td></tr>`)
      return
    }
    for (let i = 0, n = arr.length; i < n; i++) {
      let age = new Date().getFullYear() - new Date(arr[i].birthday).getFullYear()
      let row = `<tr>
        <td>${arr[i].userCode}</td>
        <td>${arr[i].userName}</td>
        <td>${arr[i].gender}</td>
        <td>${age}</td>
        <td>${arr[i].phone}</td>
        <td>${arr[i].roleName}</td>
        <td>
          <a href="userView.html?id=${arr[i].id}"><img src="img/read.png" alt="查看" title="查看" /></a>
          <a href="userUpdate.html?id=${arr[i].id}"><img src="img/xiugai.png" alt="修改" title="修改" /></a>
          <a href="##" data-id="${arr[i].id}" data-role="${arr[i].roleName}" class="removeUser"><img src="img/schu.png" alt="删除" title="删除" /></a>
        </td>
      </tr>`
      table.append(row)
    }
    $('.total-page').html(`共${totalpage}页/第${pageInfo.page}页`)
    $('.input-page').val(pageInfo.page)
    $('.removeUser').click(async function () {
      let role = $(this).attr('data-role')
      if (role === '系统管理员') {
        return alert('系统管理员不能删除')
      }
      let flag = confirm('确定要永久删除吗?')
      if (!flag) {
        return alert('你取消了删除')
      }
      let id = $(this).attr('data-id')
      //准备参数
      let options = {
        url: 'http://146.56.230.35:3007/users/deleteUserById',
        type: 'DELETE',
        data: { id: parseInt(id) },
      }
      //执行删除请求
      try {
        let res = await request(options)
        //删除不成功
        if (res.code !== 200) {
          return alert(res.msg)
        }
        //删除成功，重新加载数据
        renderUserList()
      } catch (error) {
        console.log(error)
      }
    })
  }
  
  $(function () {
    renderUserList()
    //点击尾页
    $('.last-page').click(function () {
      pageInfo.page = totalpage
      renderUserList()
    })
    //点击首页
    $('.first-page').click(function () {
      pageInfo.page = 1
      renderUserList()
    })
    //点击下一页
    $('.next-page').click(function () {
      let num = pageInfo.page
      num++
      if (num >= totalpage) {
        num = totalpage
      }
      pageInfo.page = num
      renderUserList()
    })
    //点击上一页
    $('.prev-page').click(function () {
      let num = pageInfo.page
      num--
      if (num <= 0) {
        num = 1
      }
      pageInfo.page = num
      renderUserList()
    })
    //input框回车时触发的操作
    $('.input-page').keyup(function (e) {
      let v = this.value
      console.log(v)
      let reg = /^\d+$/
      if (!reg.test(v) || parseInt(v) === 0) {
        this.value = 1
        return
      }
      if (e.which === 13) {
        pageInfo.page = parseInt(v)
        renderUserList()
      }
    })
    //pagesize发生变化执行的函数
    $('#pagesize').change(function () {
      let size = parseInt(this.value)
      pageInfo.pageSize = size
      renderUserList()
    })
    //点击查询按钮，按照指定用户名模糊查询用户列表
    $('.search-btn').click(function () {
      let userName = $('.user').val()
      pageInfo.userName = userName
      renderUserList()
    })
    //搜索框获得焦点的时候，清空搜索框
    $('.user').focus(function () {
      this.value = ''
    })
  })
  
  /*
    pagesize = 5
    total = 13
    totalpage = Math.ceil(total/pagesize) = 3
  */
  